import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';

createApp({
    data() {
        return {
            mobile: {},
            searchConditions: {
                phone: ''
            },
            error: ''
        }
    },
    methods: {
        search() {
            // 前端数据校验
            if (!/^\d{11}$/.test(this.searchConditions.phone)) {
                this.error = "请输入有效的11位手机号码";
                return;
            }

            axios.get('http://localhost:8080/mobile?phone=' + this.searchConditions.phone)
                .then(response => {
                    this.error = '';
                    //code为200说明成功
                    if(response.data.code == 200) {
                        this.mobile = response.data.data;
                    } else if (response.data.code == -1) {
                        this.mobile = {};
                        this.error = "后端程序出现异常：" + response.data.msg + "，请稍后再试！";
                    } else if (response.data.code == -2) {
                        this.mobile = {};
                        this.error = "您输入的手机号为空，请重试！";
                    } else if (response.data.code == -3) {
                        this.mobile = {};
                        this.error = "未查询到您输入的手机号的归属地，请确认输入手机号是否正确！"
                    }
                })
                .catch(error => {
                    this.error = '查询失败，请稍后重试';
                    console.error('API Error:', error);
                });
        }
    }
}).mount('#app');